<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>部门管理</title>
  <link rel="stylesheet" href="css/dept.css">
</head>

<body>
  <div id="app">
    <div>{{title}}</div>
    <!-- 查询表单 -->
    <div>
      <input type="text" v-model="queryInfo.deptName" placeholder="部门名称模糊查询">
      <button @click="requery">搜索</button>
    </div>
    <!-- 添加的表单 -->
    <div>

      <input type="text" v-model="addInfo.deptName" placeholder="部门名称">
      <input type="text" v-model="addInfo.deptInfo" placeholder="部门描述">
      <button @click="add">添加部门</button>
      <!-- 要用vue方式重置表单 -->
      <input type="reset" @click="resetAdd">
      <!-- {{addInfo}} -->

    </div>


    <!-- 数据呈现的部分 -->
    <table v-if="!loading">
      <thead>
        <tr>
          <th>编号</th>
          <th>名称</th>
          <th>描述</th>
          <th>最后修改时间</th>
          <th>操作</th>
        </tr>
      </thead>

      <tbody>
        <tr v-for="d in list">
          <td>{{d.deptId}}</td>
          <td>{{d.deptName}}</td>
          <td>{{d.deptInfo}}</td>
          <td>
            {{d.lastupdate}}
            <br>
            {{ d.lastupdate | formatDate }}
            <br>
            {{ d.lastupdate | formatDate('yyyy年MM月dd日') }}

          </td>
          <td>
            <button @click="del(d)">删除</button>
            <button @click="showModify(d)">修改</button>
          </td>
        </tr>

      </tbody>

    </table>

    <!-- 分页的部分 -->
    <div v-if="!loading">
      <a href="javascript:void(0)" @click="toPage(page.pageNumber-1)">上一页</a>
      |
      当前页/总页数/记录数：
      {{page.pageNumber}}/
      {{page.pageCount}}/
      {{page.total}}
      |
      <a href="javascript:void(0)" @click="toPage(page.pageNumber+1)">上一页</a>
    </div>

    <!-- 加载中界面 -->
    <div v-if="loading">
      数据加载中，请稍后...
    </div>

    <!-- 修改的部分 -->
    <transition name="modify">
      <div v-if="visible">
        <input type="text" v-model="modifyInfo.deptName" placeholder="部门名称">
        <input type="text" v-model="modifyInfo.deptInfo" placeholder="部门描述">
        <button @click="modify">修改部门</button>
        <button @click="visible=false;query();">取消</button>
      </div>
    </transition>
    <!-- 
      二阶段作业，同步上课的进度，完成班级和学生管理系统
      上课完成部门和员工管理之后的一周上交作业
    -->

    <!-- {{page}} -->
    <!-- 
    <div>
      {{list}}
    </div> -->

  </div>


  <script src="../lib/vue.min.js"></script>
  <script src="../lib/axios.min.js"></script>
  <script src="../lib/qs.min.js"></script>
  <script src="../lib/spark-md5.min.js"></script>
  <script src="../js/ajax.js"></script>
  <script src="../js/filters.js"></script>

  <script src="js/dept.js"></script>

</body>

</html>